<template>
    <div class="new-friends">
        <back title="新的朋友">
            <!-- <span class="add-friend iconfont icon-add-friends_icon" @click="$router.push('/addfriends')"></span> -->
        </back>
        <div class="new-friends-content">
            <search-input @hidesearch="hidesearch"></search-input>

            <!--好友请求-->
            <div class="new-friends-apply">
                <div class="min-title">好友请求</div>
                <div class="apply-list">
                    <nodata v-if="applyList.length < 1" title="还没有好友申请"></nodata>
                    <div v-else v-for="(item,index) in applyList" :key="index">
                        <apply-item :item="item" sendtext="接受">
                            <template>
                                <button type="button" class="applybtn accept" @click="sendSub(item,1)">接受</button>
                                <button type="button" class="ibtn refuse" @click="sendSub(item,2)">拒绝</button>
                                <button type="button" class="ibtn ignore" @click="sendSub(item,3)">忽略</button>
                            </template>
                        </apply-item>
                    </div>
                </div>
            </div>

            <!--待处理好友申请-->
            <div class="new-friends-apply">
                <div class="min-title">待处理好友申请</div>
                <div class="apply-list">
                    <div v-for="(item,index) in myApplylist" :key="index">
                        <user-item :item="item" sendtext="请求已发送"></user-item>
                    </div>
                </div>
            </div>
        </div>

        <!--搜索-->
        <search v-if="showsearch" @hidesearch="hidesearch"></search>
    </div>
</template>

<script>
import search from '@/components/search'
import searchInput from '@/components/search/search'
import userItem from '@/components/friends/item.vue'
import applyItem from '@/components/friends/apply.vue'
export default {
    data(){
        return{
            searchval:'',
            showsearch:false,
            myApplylist:[],
            friends:[
                {
                    "name": "ANSHAN",
                    "phone":"12345678911",
                    "value": 3
                },
                {
                    "name": "ANSHAN",
                    "phone":"12345678911",
                    "value": 4
                },
            ],
            applyList:[]
        }
    },
    components:{
        search,
        searchInput,
        userItem,
        applyItem
    },
    created(){
        this.getApplyList() 
        this.myApply();
    },
    methods:{
        /**
         * 我发出的待处理好友申请
         */
        myApply(){
            this.$http.get(`/Message/myApply`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.myApplylist =res.data
                }
            })
        },
        hidesearch(){
            this.showsearch = !this.showsearch
        },
        /**
         * 好友请求
         */
        getApplyList(){
            this.$http.get(`/Message/getApplyList`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.applyList = res.data.applys
                }
            })
        },
        /**
         * 接受好友申请
         */
        sendSub(item,type){
            this.$http.get(`/Message/processApply`,{
                id:item.id,
                status:type
            }).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.$createToast({
                        time: 2000,
                        txt: '操作成功',
                        type:'correct'
                    })
                    this.getApplyList()
                }
            })
        }
    }
}
</script>

<style lang="stylus">
.new-friends{
    padding-top:50px;
    min-height:100%;
    background:#f7f7f7;
    .add-friend{
        display: block;
        width:40px;
        height:40px;
        position: absolute;
        top:2px;
        right:0;
        font-size:18px;
        color:rgb(61, 129, 203);
    }
    .new-friends-content{
        height 100%
        overflow-y auto
        .new-friends-apply{
            margin-bottom:15px;
            background:#fff;
            .min-title{
                border-bottom:1px solid #eee;
                font-size:14px;
                height:30px;
                line-height:30px;
                padding:0 10px;
            }
            .apply-list{
                .ibtn{
                    background #eeeeee
                    color #555
                    font-size 12px
                    padding 3px 5px
                    border-radius 2px
                    width 50px
                    height 25px
                    margin-left 5px
                    &.refuse{
                        background #fd6a6a
                        color #fff
                    }
                    &.ignore{
                        background #f79e00
                        color #fff
                    }
                }
            }
        }
    }
}
</style>
